<script setup>
import { supportsLocalStorage } from "@/lib/utils";
import { ref } from "vue";
import { get, set } from "tiny-cookie";

const isOpen = ref(false);
const storageName = "cookie-consent";

const getVisited = () => {
  if (supportsStorage) {
    return localStorage.getItem(storageName);
  } else {
    return get(storageName);
  }
};

const supportsStorage = supportsLocalStorage();
if (!getVisited()) {
  isOpen.value = true;
}

const setValue = (value) => {
  if (supportsStorage) {
    localStorage.setItem(storageName, value);
  } else {
    set(storageName, value);
  }
};

const handleAccept = () => {
  setValue("accept");
  isOpen.value = false;
};

const hadnleDecline = () => {
  setValue("decline");
  isOpen.value = false;
};
</script>

<template>
  <div
    v-if="isOpen"
    class="text-sm text-white bg-secondary p-[15px] md:flex md:items-center md:justify-between md:py-[15px] px-5"
  >
    <p class="md:mr-[10px]">
      We use cookies and other tracking technologies to improve your browsing
      experience on our website. By using our website, you consent to our use of
      cookies and other tracking technologies.
      <a
        class="underline"
        target="_blank"
        href="https://jason.codes/cookie-policy"
        rel="noopener"
        >Find out more</a
      >.
    </p>
    <div class="flex-shrink-0">
      <button
        class="p-[15px_25px] text-[15px] font-medium text-white cursor-pointer bg-black transition-all hover:bg-[#2f2f2f] focus:hover-[#2f2f2f] mt-[15px] mr-[10px] md:flex-shrink-0 md:ml-[10px]"
        type="button"
        aria-label="Close"
        @click="hadnleDecline"
      >
        Decline
      </button>

      <button
        class="p-[15px_25px] text-[15px] font-medium text-white cursor-pointer bg-primary transition-all hover:bg-[#146fb7] focus:hover-[#146fb7] mt-[15px] mr-[10px] md:flex-shrink-0 md:ml-[10px]"
        type="button"
        aria-label="Close"
        @click="handleAccept"
      >
        Accept
      </button>
    </div>
  </div>
</template>
